<template>
    <div class="user">
        <span>
            欢迎：{{ username }}
            <van-button class="out" type="primary" @click="logout">退出登录</van-button>
        </span>
    </div>
    <div style="height: 50px;">
        <ul class="nav">
            <li>
                <router-link to="/content/live">直播</router-link>
            </li>
            <li>
                <router-link to="/content/commend">推荐</router-link>
            </li>
            <li>
                <router-link to="/content/hot">热门</router-link>
            </li>
            <li>
                <router-link to="/content/follow">追番</router-link>
            </li>
            <li>
                <router-link to="/content/flim">影视</router-link>
            </li>
            <li>
                <router-link to="/content/party">建党百年</router-link>
            </li>
        </ul>
        <van-sticky :offset-top="0"></van-sticky>
    </div>

    <ul class="footer">
        <li>
            <router-link to="/content/home">
                <house />主页
            </router-link>
        </li>
        <li>
            <router-link to="/content/shop">
                <shopping-bag />购物
            </router-link>
        </li>
        <li>
            <router-link to="/content/sow">
                <camera-filled />直播
            </router-link>
        </li>
        <li>
            <router-link to="/content/message">
                <comment />信息
            </router-link>
        </li>
        <li>
            <router-link to="/content/seter">
                <setting />设置
            </router-link>
        </li>
    </ul>
    <router-view v-slot="{ Component }">
    <keep-alive >
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>



<script setup lang="ts">
import { ref } from 'vue'
import axios from "axios";
import { useRouter } from 'vue-router'
import { House } from '@element-plus/icons'
import { ShoppingBag } from '@element-plus/icons'
import { Setting } from '@element-plus/icons'
import { CameraFilled } from '@element-plus/icons'
import { Comment } from '@element-plus/icons'
const router = useRouter()
const value = ref('');
const username = localStorage.getItem('user')

const logout = () => {
    const params = {
        "admin": username,
    }
    axios.get('http://localhost:8080/api/out', { params }).then((response: any) => {
        console.log(response);
    })
    localStorage.removeItem('user')
    localStorage.removeItem('pwd')
    localStorage.removeItem('token')
    router.push({ name: 'login' })
}
</script>

<style lang="scss" scoped>
.nav {
    display: flex;
    list-style: none;
    overflow-x: scroll;
    &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }
    li {
        font-size: 14px;
        margin: 20px;
        white-space: nowrap;
    }
}
.user {
    display: flex;
    justify-content: flex-end;
    margin: 5px;
    span {
        font-size: 17px;
    }
    .out {
        vertical-align: middle;
        background-color: #ccc;
        height: 25px;
        line-height: 25px;
        border: 0px;
    }
}
.footer {
    display: flex;
    justify-content: space-around;
    width: 100%;
    position: fixed;
    bottom: 0px;
    li {
        font-size: 14px;
    }
}
</style>